<template>
    <div v-loading="itemsLoading">
      <el-form label-width="240px" ref="updateFormRef" :model="formModel">
        <template v-for="(item, index) in formList" :key="index">
          <el-form-item :label="item.config_name + ':'" :prop="item.name_field">
            <div>
              <!-- text -->
              <template v-if="item.type.value == 'text'">
                <!--  -->
                <el-input
                  v-if="item.input_type.value == 'input'"
                  :type="item.input_type.value"
                  v-model="formModel[item.name_field]"
                  style="width: 300px"
                />
                <!--  -->
                <!-- <el-input-number
                  v-if="item.input_type.value == 'number'"
                  v-model="formModel[item.name_field]"
                /> -->
                <!--  -->
                <el-date-picker
                  v-if="item.input_type.value == 'datetime'"
                  type="datetime"
                  placeholder="选择时间"
                  v-model="formModel[item.name_field]"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
                <!--  -->
                <el-color-picker
                  v-if="item.input_type.value == 'color'"
                  v-model="formModel[item.name_field]"
                />
              </template>
              <template v-if="item.type.value == 'textarea'">
                <el-input
                  type="textarea"
                  v-model="formModel[item.name_field]"
                  style="width: 300px"
                />
              </template>
              <template v-if="item.type.value == 'radio'" >
                <el-radio-group
                  size="default"
                  v-model="formModel[item.name_field]"
                  
                >
                  <template v-for="(items, idx) in item.options" :key="idx">
                    <el-radio :label="items.value" border>{{
                      items.label
                    }}</el-radio>
                  </template>
                </el-radio-group>
              </template>
              <template v-if="item.type.value == 'select'">
                <el-select v-model="formModel[item.name_field]" size="default">
                  <el-option
                    v-for="items in item.options"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  />
                </el-select>
              </template>
            </div>
            <!-- 帮助 -->
            <help :hideIcon="true">
              {{ item.desc }}
            </help>
          </el-form-item>
        </template>
      </el-form>
      <div class="mt50 flex center">
        <el-button v-if="isModal" @click="close">取消</el-button>
        <el-button
          type="primary"
          @click="createOk(updateFormRef)"
          :loading="btnLoading"
          :disabled="btnLoading"
          v-permission="'system-basic-save'"
          >保存</el-button
        >
      </div>
    </div>
  </template>
  <script lang="ts">
  export default {
    name: "basicUpdateForm",
  };
  </script>
  <script lang="ts" setup>
  import { ref, getCurrentInstance, onMounted, watch,reactive } from "vue";
  import { getConfigItems, saveConfig } from "@/api/system/basic";
  import type { Result, ResultError } from "@/types";
  import type { FormInstance } from "element-plus";
  import { useConfig } from "@/store";
  
  const props = withDefaults(
    defineProps<{
      isModal?: boolean;
    }>(),
    {
      isModal: false,
    }
  );
  
  const { proxy } = getCurrentInstance() as any;
  
  const {
    proxy: { $utils },
  } = getCurrentInstance() as any;
  
  const updateFormRef = ref<HTMLElement>();
  
  const emit = defineEmits(["close"]);
  
  const itemsLoading = ref<boolean>(true);
  
  const tabActiveName = ref<string>("");
  
  const itemActive = ref<string>("");
  
  const tabActiveItem: any = ref({});
  
  const btnLoading = ref(false);
  
  
  const formModel: any = ref({});
  
  const createOk = async (formEl:typeof FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid:any, fields: any) => {
      if (valid) {
        if (btnLoading.value) {
          return;
        }
        btnLoading.value = true;
        saveConfig(formModel.value)
          .then((res: Result) => {
            $utils.successMsg(res.message);
            initConfigItems();
            initSystemInfo();
            btnLoading.value = false;
            close();
          })
          .catch((err: ResultError) => {
            $utils.errorMsg(err);
            btnLoading.value = false;
          });
        }
      })
  };
  
  const tabId = ref<number | string>(0);
  
  const formList = ref<any>([]);
  
  const initConfigItems = () => {
    itemsLoading.value = true;
    getConfigItems({
      tab_id: tabId.value,
    })
      .then((res: Result) => {
        formList.value = res.data.list;
        formModel.value = res.data.form;
        setTimeout(() => {
          itemsLoading.value = false;
        }, 500);
      })
      .catch((err: ResultError) => {
        $utils.errorMsg(err);
      });
  };
  
  const toInit = (id: number | string) => {
    tabId.value = id;
    initConfigItems();
  };
  
  const initSystemInfo = () => {
    useConfig().setSystemInfo();
  };
  
  const close = () => {
    emit("close");
  };
  
  defineExpose({ toInit });
  </script>
  